<!-- 标签操作(添加、查看) -->
<template>
  <div class="tags-container">
    <div class="form-action">
      <el-row>
        <el-col :span="24">
          <el-select v-model="tagsData" :placeholder="$t('paperQuestionLangList.tagsTooltip')" value-key="id" filterable multiple style="width: 300px">
            <el-option v-for="item in allTagsArr" :key="item.id" :label="item.title" :value="item"/>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="tags-list">
            <el-tag v-for="tag in tagsData" :key="tag.id" closable @close="handleCloseTag(tag)">
              {{ tag.title }}
            </el-tag>
            <el-input v-if="inputVisible" ref="saveTagInput" v-model="addTagForm.title" class="input-new-tag" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputBlur"/>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">{{ $t('paperQuestionLangList.addTag') }}</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="showBtn" type="flex" justify="center">
        <el-button type="primary" @click="saveTags">{{ $t('form.sure') }}</el-button>
        <el-button type="primary" @click="closeTagModal">{{ $t('form.cancel') }}</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getTagList } from '@/api/tags'
import { getPaperQuestionTags, updatePaperQuestionTags } from '@/api/question'
import { createTag } from '@/api/tags'
import { removeArray } from '@/utils'
export default {
  name: 'PaperTags',
  model: {
    prop: 'chooseTags',
    event: 'parent-event'
  },
  props: {
    qId: {
      type: String,
      default: ''
    },
    chooseTags: Array,
    showBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      allTagsArr: [],
      tagsValue: '',
      tagsData: [],
      inputVisible: false,
      addTagForm: {
        title: '',
        category: 'question'
      }
    }
  },
  watch: {
    'qId': function(val) {
      this.qId = val
      this.inputVisible = false
      this.initTagsData()
    },
    'tagsData': function(val) {
      const idArray = []
      val.forEach(v => {
        idArray.push(v.id)
      })
      this.$emit('parent-event', idArray)
    }
  },
  created() {
    console.info(this.qId)
    this.initData()
    if (this.qId !== '') {
      this.initTagsData()
    } else {
      this.tagsData = this.chooseTags
    }
  },
  methods: {
    // 初始化标签数据
    initData() {
      const _this = this
      getTagList({ title: '' }).then(res => {
        _this.allTagsArr = res
      })
    },
    // 初始化已选择标签数据
    initTagsData() {
      const _this = this
      getPaperQuestionTags(_this.qId).then(res => {
        _this.tagsData = res
      })
    },
    // 初始化页面
    initPage() {
      this.tagsData = []
      this.tagsValue = ''
      this.inputVisible = false,
      this.addTagForm = {
        title: '',
        category: 'question'
      }
      this.allTagsArr = []
      this.initData()
    },
    // 添加新标签
    showInput() {
      this.inputVisible = true
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 执行添加
    handleInputConfirm() {
      const _this = this
      let submitFlag = true
      for (let i = 0; i < _this.allTagsArr.length; i++) {
        if (_this.allTagsArr[i].title == _this.addTagForm.title) {
          submitFlag = false
          break
        }
      }
      if (!submitFlag) {
        _this.$message({
          message: '标签名称重复',
          type: 'warning'
        })
        return
      }
      createTag(_this.addTagForm).then(res => {
        if (res) {
          _this.allTagsArr.push(res)
          _this.tagsData.push(res)
          _this.inputVisible = false
          _this.addTagForm.title = ''
        }
      })
    },
    handleInputBlur() {
      this.inputVisible = false
      this.inputValue = ''
    },
    // 删除标签
    handleCloseTag(obj) {
      if (this.tagsData.length === 1) {
        this.$message({
          message: '至少留一个标签',
          type: 'warning'
        })
      } else {
        this.tagsData = removeArray(this.tagsData, obj)
      }
    },
    // 保存
    saveTags() {
      const _this = this
      if (_this.tagsData.length > 0) {
        const idArr = []
        _this.tagsData.forEach(v => {
          idArr.push(v.id)
        })
        const loading = _this.$loading({
          lock: true,
          text: '数据保存中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.6)'
        })
        const urlData = {
          labelIds: idArr.join(',')
        }
        updatePaperQuestionTags(_this.qId, urlData).then(res => {
          if (res) {
            _this.$message({
              message: '保存成功',
              type: 'success'
            })
            loading.close()
            _this.closeTagModal()
          }
        })
      } else {
        _this.$message({
          message: '至少选一个标签',
          type: 'warning'
        })
      }
    },
    // 取消
    closeTagModal() {
      this.$emit('cancelAction')
    }
  }
}
</script>

<style lang="less" scoped>
  .tags-list {
    min-height: 160px;
    max-height: 160px;
    margin-top: 20px;
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
</style>
